<template>
  <div class="topbar-wrapper">
    <a-menu v-model="current" mode="horizontal">
      <a-menu-item v-for="item in navs" :key="item.key">
        <nuxt-link :to="item.link">
          {{ item.name }}
        </nuxt-link>
      </a-menu-item>
    </a-menu>
  </div>
</template>
<script>
export default {
  // name: 'TopBar',
  data () {
    return {
      current: ['recommend'],
      navs: [
        {
          name: '推荐',
          link: '/recommend',
          key: 'recommend'
        },
        {
          name: '热点',
          link: '/hot',
          key: 'hot'
        },
        {
          name: '科技',
          link: '/technology',
          key: 'technology'
        },
        {
          name: '体育',
          link: '/sports',
          key: 'sports'
        }
      ]
    }
  },
  watch: {
    '$route.path': {
      handler (newVal, oldVal) {
        console.log(newVal, 'newVal')
      },
      immediate: true
    }
  }
}
</script>
<style scoped lang="less">
.topbar-wrapper {
  width: 90%;
  margin: 0 auto;
  padding: 0 20px;
}
</style>
